<template>
	<view class="custom_follow_button" :class="!isFollow? '' :'on'">
		<view class="follow_text" v-if="isFollow" @click="cancelFollowHandle">已关注</view>
		<view class="follow_text" v-else @click="addFollowHandle">关注</view>
	</view>
</template>

<script>
	export default {
		name:"custom-follow-button",
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				isFollow:false,
				loading:false
			};
		},
		created() {
			this.isFollow = this.$props.item.isFollow || this.isFollow;
		},
		methods:{
			addFollowHandle(){
				let that = this;
				if (!this.loading){
					this.loading = true;
					this.$store.dispatch('addFollow', {userId:this.$props.item.userId}).then(res=>{
						that.isFollow = true;
					}).catch(err=>{
						console.log(err)
					}).finally(()=>{
						that.loading = false;
					})
				}
			},
			cancelFollowHandle(){
				let that = this;
				if (!this.loading){
					this.loading = true;
					this.$store.dispatch('cancelFollow', {userId:this.$props.item.userId}).then(res=>{
						that.isFollow = false;
					}).catch(err=>{
						console.log(err)
					}).finally(()=>{
						that.loading = false;
					})
				}
			}
		}
	}
</script>

<style lang="less">
.custom_follow_button{
	&.on{
		background-color: #FFFFFF;
		border:2rpx #999999 solid;
	}
	background-color: #4CD964;
	border:2rpx #4CD964 solid;
	border-radius: 40rpx;
	.follow_text{
		padding:6rpx 20rpx;
		font-size: 24rpx;
	}
}
</style>
